<!--
CandyCrush
Your Name:
Collaborators:
-->
<!DOCTYPE html>
<html>
<!--
/* Copyright (c) 2017 MIT 6.813/6.831 course staff, all rights reserved.
 * Redistribution of original or derived work requires permission of course staff.
 */
-->

<head>
<meta charset="utf-8">
<title>CandyCrush</title>

		<!-- Load style sheets -->
<link rel="stylesheet" href="./css/bootstrap.css">

<link rel="stylesheet" href="./css/mainLayout.css">

		<!-- Use mobile-aware viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Load any supplemental Javascript libraries here -->
<script src="./js/jquery.min.js"></script>
<script src="./js/seedrandom.min.js"></script>


<script src="./js/candy.js"></script>
<script src="./js/board.js"></script>
<script src="./js/rules.js"></script>

<script>

// By default, the first board loaded by your page will be the same 
// each time you load (which is accomplished by "seeding" the random
// number generator. This makes testing (and grading!) easier!
Math.seedrandom(0);


// A short jQuery extension to read query parameters from the URL.
$.extend({
  getUrlVars: function() {
    var vars = [], pair;
    var pairs = window.location.search.substr(1).split('&');
    for (var i = 0; i < pairs.length; i++) {
      pair = pairs[i].split('=');
      vars.push(pair[0]);
      vars[pair[0]] = pair[1] &&
          decodeURIComponent(pair[1].replace(/\+/g, ' '));
    }
    return vars;
  },
  getUrlVar: function(name) {
    return $.getUrlVars()[name];
  }
});

// constants
var DEFAULT_BOARD_SIZE = 8;

// data model at global scope for easier debugging
var board;
var rules;

// initialize board
if ($.getUrlVar('size') && $.getUrlVar('size') >= 3) {
  board = new Board($.getUrlVar('size'));
} else {
  board = new Board(DEFAULT_BOARD_SIZE);
}

// load a rule
rules = new Rules(board);

// Final initialization entry point: the Javascript code inside this block
// runs at the end of start-up when the page has finished loading.
$(document).ready(function()
{
  // Your code here.
});


/* Event Handlers */
// access the candy object with info.candy

// add a candy to the board
$(board).on('add', function(e, info)
{
 var boxSize=width/board.square.length
  var candyTable=document.getElementById("candTable")
  if(info.flag){
    
  }
});

// move a candy on the board
$(board).on('move', function(e, info)
{
var candyTable=document.getElementById("candTable")
 var boxSize=width/board.square.length

  
});

// remove a candy from the board
$(board).on('remove', function(e, info)
{
  // Your code here.
});

// move a candy on the board
$(board).on('scoreUpdate', function(e, info)
{
  // Your code here. To be implemented in pset 2.
});

// Button Events
$(document).on('click', "#buttonIDhere", function(evt)
{
  // Your code here.
});

// keyboard events arrive here
$(document).on('keydown', function(evt) {
  // Your code here.
});

//******************begin: 2-Adding Basic Behavior中创建新的游戏面板函数  ******************
			function createNewTables() {
				board.clear() //先清空棋盘
				rules.prepareNewGame()
				var candyTable = document.getElementById("candyTable")
				candyTable.innerHTML = "" //清空棋盘
				// mainColumn.appendChild(candyTable)
				candySize = 400 / board.square.length - 4
				for (let i = 0; i < board.square.length; i++) {
					var tr = document.createElement("tr")
					tr.setAttribute("index", i)

					for (let j = 0; j < board.square.length; j++) {
						var td = document.createElement("td")
						td.setAttribute("index", i)
						td.innerText = String.fromCharCode(j + 97) + (i + 1)
						td.style.backgroundColor = board.square[i][j].color
						td.style.width = candySize + "px"
						td.style.height = candySize + "px"
						td.style.border = '2px grey solid'
						if (board.square[i][j].color !== 'yellow') {
							td.style.color = 'white'
						} else {
							td.style.color = 'grey'
						}
						tr.appendChild(td)
					}
					candyTable.appendChild(tr)
				}
			}
			//******************end: 2-Adding Basic Behavior中创建新的游戏面板函数  ******************


</script>


</head>

<body>

<div class="container">
  <div class="row">
    <div class="col-md-4" id="firstColumn">
      <div>
      <!-- Column 1 Code Here -->
      <!--******************begin: 1.1 -Basic Layout中第一列样式布局  ******************-->
					<div>
						<h2 style="color: red;padding-bottom: 10px;">Candy</br>Crush</h2>
						<button type="button" class="btn btn-outline-light" id='newGame'
							style="width: 180px; font-weight: 800;margin-top: 20px;" onclick="createNewTables()">New
							Game</button>
					</div>
		<!--******************end: 1.1 -Basic Layout中第一列样式布局  ******************-->

      </div>
  </div>

    <div class="col-md-4" id="mainColumn">

      <!--******************begin: 1.2 -Basic Layout中第二列游戏板布局  ******************-->
					<table id="candyTable" style="border: 3px solid grey;margin: auto; border-collapse: collapse;">

					</table>
		<!--******************end: 1.2 -Basic Layout中第二列游戏板布局  ******************-->

    </div>

    <div class="col-md-4" id="lastColumn">

      <!-- Column 3 Code Here -->
      <!--******************begin: 1.3-Basic Layout中第二列移动控制面板布局  ******************-->
					<div>
						<h3 style="float: left;">Move：</h3>
						<input id="candyInput" type="text" class="form-control" style="width: 70px;" required
							pattern="^[a-z][0-9][\s\S]*" maxlength="2" />
					</div>
					<div style="margin: 10px;">
						<table sty>
							<tr>
								<td></td>
								<td><button id="btnDirection1" type="button" class="btn btn-outline-light"
										onclick="moveCandy('up')" disabled="true">↑</button></td>
								<td></td>
							</tr>
							<tr>
								<td><button id="btnDirection2" type="button" class="btn btn-outline-light"
										onclick="moveCandy('left')" disabled="true">←</button></td>
								<td></td>
								<td><button id="btnDirection3" type="button" class="btn btn-outline-light"
										onclick="moveCandy('right')" disabled="true">→</button></td>
							</tr>
							<tr>
								<td></td>
								<td><button id="btnDirection4" type="button" class="btn btn-outline-light"
										onclick="moveCandy('down')" disabled="true">↓</button></td>
								<td></td>
							</tr>
						</table>
						<button type="button" class="btn btn-outline-light" id="crushBtn" disabled="true"
							style="width: 180px; font-weight: 800 ;margin-top: 10px; margin-left: -100px;"
							onclick="candyDelete()">Crush
							Once</button>
					</div>
					<!--******************end: 1.3-Basic Layout中第二列移动控制面板布局  ******************-->

    </div>
  </div> <!-- class="row" -->
</div> <!-- class="container" -->

</body>

</html>